<template>
  <div id="container" class="w-full h-full" style="height: calc(100% - 100px)"></div>
</template>

<script lang="ts">
import { Graph } from '@antv/x6'
import gl from '@/assets/image/steamDiagram/gl-icon.png'
import sj from '@/assets/image/steamDiagram/sj-icon.png'
import wx from '@/assets/image/steamDiagram/wx-icon.png'

export default {
  mounted() {
    const data = {
      nodes: [
        {
          id: 'gl1',
          label: { name: '1#锅炉', x: 0, y: 50 },
          img: gl,
          width: 96,
          height: 56,
          x: 100,
          y: 100,
        },
        {
          id: 'gl2',
          label: { name: '2#锅炉', x: 0, y: 50 },
          img: gl,
          width: 96,
          height: 56,
          x: 100,
          y: 250,
        },
        {
          id: 'gl3',
          label: { name: '3#锅炉', x: 0, y: 50 },
          img: gl,
          width: 96,
          height: 56,
          x: 100,
          y: 400,
        },
        {
          id: 'gl4',
          label: { name: '4#锅炉', x: 0, y: 50 },
          img: gl,
          width: 96,
          height: 56,
          x: 100,
          y: 550,
        },

        {
          id: 'sj1',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 400,
          y: 100,
        },
        {
          id: 'sj2',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 400,
          y: 300,
        },
        {
          id: 'sj3',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 400,
          y: 400,
        },
        {
          id: 'sj4',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 400,
          y: 500,
        },
        {
          id: 'sj5',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 400,
          y: 600,
        },

        {
          id: 'sj6',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 650,
          y: 350,
        },
        {
          id: 'sj7',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 650,
          y: 450,
        },
        {
          id: 'sj8',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 650,
          y: 550,
        },

        {
          id: 'sj9',
          label: { name: '双减', x: 0, y: 45 },
          img: sj,
          width: 69,
          height: 61,
          x: 850,
          y: 550,
        },

        {
          id: 'wx1',
          label: { name: '卫星', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 50,
        },
        {
          id: 'wx2',
          label: { name: '厂用', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 150,
        },
        {
          id: 'wx3',
          label: { name: '嘉宏', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 250,
        },
        {
          id: 'wx4',
          label: { name: '碳三', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 350,
        },
        {
          id: 'wx5',
          label: { name: '瑞一', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 500,
        },
        {
          id: 'wx6',
          label: { name: '盛奥', x: 55, y: 0 },
          img: wx,
          width: 70,
          height: 70,
          x: 1100,
          y: 600,
        },
      ],
      edges: [
        //第一排到第二排连接
        {
          source: 'gl1',
          target: 'wx1',
          vertices: [
            { x: 250, y: 130 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 130 },
            { x: 300, y: 50 },
            { x: 900, y: 50 },
            { x: 900, y: 70 },
            { x: 1100, y: 70 },
          ],
        },
        {
          source: 'gl1',
          target: 'sj1',
          vertices: [
            { x: 250, y: 130 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 130 },
          ],
        },
        {
          source: 'gl2',
          target: 'sj2',
          vertices: [
            { x: 250, y: 280 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 480 },
            { x: 350, y: 480 },
            { x: 350, y: 330 },
          ],
        },
        {
          source: 'gl3',
          target: 'sj3',
          vertices: [
            { x: 250, y: 430 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 480 },
            { x: 350, y: 480 },
            { x: 350, y: 430 },
          ],
        },
        {
          source: 'gl4',
          target: 'sj4',
          vertices: [
            { x: 250, y: 580 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 480 },
            { x: 350, y: 480 },
            { x: 350, y: 530 },
          ],
        },
        {
          source: 'gl4',
          target: 'sj5',
          vertices: [
            { x: 250, y: 580 },
            { x: 250, y: 350 },
            { x: 300, y: 350 },
            { x: 300, y: 480 },
            { x: 350, y: 480 },
            { x: 350, y: 630 },
          ],
        },

        //第二排到第三排连接
        {
          source: 'sj2',
          target: 'wx1',
          vertices: [
            { x: 510, y: 330 },
            { x: 510, y: 480 },
            { x: 550, y: 480 },
            { x: 550, y: 300 },
            { x: 600, y: 300 },
            { x: 600, y: 85 },
            { x: 1100, y: 85 },
          ],
        },
        {
          source: 'sj3',
          target: 'sj6',
          vertices: [
            { x: 510, y: 430 },
            { x: 510, y: 480 },
            { x: 550, y: 480 },
            { x: 550, y: 300 },
            { x: 600, y: 300 },
            { x: 600, y: 380 },
          ],
        },
        {
          source: 'sj4',
          target: 'sj7',
          vertices: [
            { x: 510, y: 530 },
            { x: 510, y: 480 },
            { x: 550, y: 480 },
            { x: 550, y: 300 },
            { x: 600, y: 300 },
            { x: 600, y: 480 },
          ],
        },
        {
          source: 'sj5',
          target: 'sj8',
          vertices: [
            { x: 510, y: 630 },
            { x: 510, y: 480 },
            { x: 550, y: 480 },
            { x: 550, y: 300 },
            { x: 600, y: 300 },
            { x: 600, y: 580 },
          ],
        },

        //第二排到第六排连接
        {
          source: 'sj1',
          target: 'wx2',
          vertices: [
            { x: 1000, y: 130 },
            { x: 1000, y: 160 },
            { x: 1100, y: 160 },
          ],
        },

        //第三排到第四排连接
        {
          source: 'sj6',
          target: 'wx1',
          vertices: [
            { x: 750, y: 380 },
            { x: 750, y: 480 },
            { x: 790, y: 480 },
            { x: 790, y: 100 },
            { x: 1100, y: 100 },
          ],
        },
        {
          source: 'sj6',
          target: 'wx2',
          vertices: [
            { x: 750, y: 380 },
            { x: 750, y: 480 },
            { x: 790, y: 480 },
            { x: 790, y: 185 },
          ],
        },
        {
          source: 'sj6',
          target: 'wx3',
          vertices: [
            { x: 750, y: 380 },
            { x: 750, y: 480 },
            { x: 790, y: 480 },
            { x: 790, y: 285 },
          ],
        },
        {
          source: 'sj7',
          target: 'wx4',
          vertices: [
            { x: 750, y: 480 },
            { x: 750, y: 480 },
            { x: 790, y: 480 },
            { x: 790, y: 385 },
          ],
        },
        {
          source: 'sj8',
          target: 'sj9',
          vertices: [
            { x: 750, y: 580 },
            { x: 750, y: 480 },
            { x: 790, y: 480 },
            { x: 790, y: 580 },
          ],
        },

        //第五排到第六排连接
        {
          source: 'sj9',
          target: 'wx5',
          vertices: [
            { x: 1000, y: 580 },
            { x: 1000, y: 535 },
          ],
        },
        {
          source: 'sj9',
          target: 'wx6',
          vertices: [
            { x: 1000, y: 580 },
            { x: 1000, y: 635 },
          ],
        },
      ],
      arrowHead: [
        {
          id: 'ar1',
          source: { x: 40, y: 120 },
          target: { x: 95, y: 120 },
          label: [
            { text: '煤', x: 0, y: -10 },
            { text: '5.3t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },
        {
          id: 'ar2',
          source: { x: 40, y: 150 },
          target: { x: 95, y: 150 },
          label: [
            { text: '水', x: 0, y: -10 },
            { text: '303t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },

        {
          id: 'ar3',
          source: { x: 40, y: 270 },
          target: { x: 95, y: 270 },
          label: [
            { text: '煤', x: 0, y: -10 },
            { text: '5.3t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },
        {
          id: 'ar4',
          source: { x: 40, y: 300 },
          target: { x: 95, y: 300 },
          label: [
            { text: '水', x: 0, y: -10 },
            { text: '453t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },

        {
          id: 'ar5',
          source: { x: 40, y: 420 },
          target: { x: 95, y: 420 },
          label: [
            { text: '煤', x: 0, y: -10 },
            { text: '5.6t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },
        {
          id: 'ar6',
          source: { x: 40, y: 450 },
          target: { x: 95, y: 450 },
          label: [
            { text: '水', x: 0, y: -10 },
            { text: '233t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },

        {
          id: 'ar7',
          source: { x: 40, y: 570 },
          target: { x: 95, y: 570 },
          label: [
            { text: '煤', x: 0, y: -10 },
            { text: '2.3t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },
        {
          id: 'ar8',
          source: { x: 40, y: 600 },
          target: { x: 95, y: 600 },
          label: [
            { text: '水', x: 0, y: -10 },
            { text: '323t/h', x: -40, y: 0, fontSize: 10 },
          ],
        },
      ],
      texts: [
        { text: '13.7MP\n365°C', color: '#6495ed', x: 270, y: 330 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 500, y: 110 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 570, y: 270 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 530, y: 460 },

        { text: '13.7MP\n365°C', color: '#6495ed', x: 1050, y: 130 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 1050, y: 270 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 1050, y: 370 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 1050, y: 520 },
        { text: '13.7MP\n365°C', color: '#6495ed', x: 1050, y: 620 },
      ],
    }

    const graph = new Graph({
      container: document.getElementById('container') as any,
      autoResize: true,
      panning: {
        enabled: true,
        eventTypes: ['leftMouseDown'],
      },
      mousewheel: true,
    })
    //居中加载
    graph.centerPoint(600, 350)

    //加载节点
    data.nodes.forEach((e) => {
      graph.addNode({
        id: e.id,
        shape: 'image',
        x: e.x,
        y: e.y,
        width: e.width,
        height: e.height,
        imageUrl: e.img,
        attrs: {
          body: {
            fill: '#fff',
          },
          label: {
            text: e.label.name,
            fill: '#000',
            x: e.label.x,
            y: e.label.y,
            fontSize: 15,
          },
        },
      })
    })
    //加载线
    data.edges.forEach((e) => {
      graph.addEdge({
        source: e.source,
        target: e.target,
        vertices: e.vertices,
        connector: {
          name: 'normal',
        },
        attrs: {
          line: {
            stroke: '#3699FF',
            strokeWidth: 1,
          },
        },
      })
    })
    //加载箭头
    data.arrowHead.forEach((e) => {
      graph.addEdge({
        source: e.source,
        target: e.target,
        connector: { name: 'rounded' },
        labels: [
          {
            attrs: {
              label: e.label[0],
            },
          },
          {
            attrs: {
              label: e.label[1],
            },
          },
        ],
        attrs: {
          line: {
            stroke: '#3699FF',
            strokeWidth: 1,
            targetMarker: {
              tagName: 'path',
              d: 'M 8 -4 0 0 8 4 Z',
              strokeWidth: 1,
              fill: '#3699FF',
              stroke: '#3699FF',
            },
          },
        },
      })
    })
    //加载 文本
    data.texts.forEach((e) => {
      graph.addNode({
        x: e.x,
        y: e.y,
        shape: 'text-block',
        text: e.text,
        attrs: {
          body: {
            stroke: '#FFF',
          },
        },
      })
    })
  },
}
</script>

<style scoped>
.g6-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
